<template>
  <div style="margin-top: 16px">
    <a-form layout="inline" :form="form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item :label="`商品编号`">
            <a-input placeholder="请输入商品编号" v-decorator="['productId']" :style="{width:'200px'}"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item :label="`商品名称`">
            <a-input placeholder="请输入商品名称" v-decorator="['productName']" :style="{width:'200px'}"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-button type="primary" html-type="submit">
            查询
          </a-button>
          <a-button :style="{marginLeft:'15px'}">
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-radio-group :style="{marginTop:'15px'}" @change="handleButtonChange">
      <a-radio-button value="checking">
        审核中
      </a-radio-button>
      <a-radio-button value="checkOk">
        审核通过
      </a-radio-button>
      <a-radio-button value="checkNo">
        审核不通过
      </a-radio-button>
    </a-radio-group>
    <span
      style="margin-left: 8px;
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #85878c;
      line-height: 16px;">{{ desc }}</span>
    <a-table v-if="this.checkStatus == 'checking'" :columns="checkingColumns" :data-source="checkingData" :style="{marginTop:'15px',float:'left',width:'100%'}"/>
    <a-table v-if="this.checkStatus == 'checkOk'" :columns="checkOkColumns" :data-source="checkOkData" :style="{marginTop:'15px',float:'left',width:'100%'}"/>
    <a-table v-if="this.checkStatus == 'checkNo'" :columns="checkNoColumns" :data-source="checkNoData" :style="{marginTop:'15px',float:'left',width:'100%'}"/>
  </div>
</template>

<script>
  const checkingColumns = [
    {
      title: '商品信息',
      dataIndex: 'productDesc',
      key: 'productDesc'
    },
    {
      title: '审核状态',
      dataIndex: 'checkStatus',
      key: 'checkStatus'
    },
    {
      title: '发布时间',
      key: 'createTime',
      dataIndex: 'createTime'
    }
  ]

  const checkOkColumns = [
    {
      title: '商品信息',
      dataIndex: 'productDesc',
      key: 'productDesc'
    },
    {
      title: '审核状态',
      dataIndex: 'checkStatus',
      key: 'checkStatus'
    },
    {
      title: '发布时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '审核时间',
      key: 'checkTime',
      dataIndex: 'checkTime'
    }
  ]

  const checkNoColumns = [
    {
      title: '商品信息',
      dataIndex: 'productDesc',
      key: 'productDesc'
    },
    {
      title: '审核状态',
      dataIndex: 'checkStatus',
      key: 'checkStatus'
    },
    {
      title: '发布时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '审核时间',
      key: 'checkTime',
      dataIndex: 'checkTime'
    }
  ]

  const checkingData = [
    {
      'productDesc': '测试商品',
      'checkStatus': '审核中',
      'createTime': '2020-12-20 00:00:00'
    }
  ]
  const checkOkData = [
    {
      'productDesc': '测试商品',
      'checkStatus': '审核通过',
      'createTime': '2020-12-20 00:00:00',
      'checkTime': '2020-12-20 12:00:00'
    }
  ]
  const checkNoData = [
    {
      'productDesc': '测试商品',
      'checkStatus': '审核不通过',
      'createTime': '2020-12-20 00:00:00',
      'checkTime': '2020-12-20 12:00:00'
    }
  ]

  export default {
    name: 'ManageProductRecord',
    data () {
      return {
        form: this.$form.createForm(this, { name: 'product_record_search' }),
        desc: '排队审核中，审核结果将在提交后1-2个工作日内反馈。',
        checkStatus: 'checking',
        checkingColumns,
        checkOkColumns,
        checkNoColumns,
        checkingData,
        checkOkData,
        checkNoData
      }
    },
    methods: {
      handleButtonChange (e) {
        this.checkStatus = e.target.value
        switch (e.target.value) {
          case 'checking':
            this.desc = '排队审核中，审核结果将在提交后1-2个工作日内反馈。'
            break
          case 'checkOk':
            this.desc = '商品审核通过后，线上商品数据将同步更新。'
            break
          case 'checkNo':
            this.desc = '商品审核不通过，可根据驳回原因重新提交申请。'
            break
        }
      }
    }
  }
</script>

<style scoped>

</style>
